﻿// useImageSize.js
import { ref, onMounted } from 'vue';

export function useImageSize(imageUrl: string) {
    const width = ref(0);
    const height = ref(0);
    const isLoading = ref(true);
    const error = ref<any>(null);

    const loadImage = (url: string) => {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.onload = () => resolve(img);
            img.onerror = reject;
            img.src = url;
        });
    };

    onMounted(async () => {
        try {
            const img: any = await loadImage(imageUrl);
           
            // 固有尺寸
            width.value = img.naturalWidth;
            height.value = img.naturalHeight;
        } catch (err) {
            error.value = err;
        } finally {
            isLoading.value = false;
        }
    });

    return { width, height, isLoading, error };
}
